/* ============================================================
   Whiterock Road — /hello and /two-prompts
   Page-level layout for the two event pages. Reads the same
   design-system tokens + site.css classes as every other page;
   nothing here changes the shared chrome.
   ============================================================ */

/* ---------- Phone vs wider copy ----------
   The phone layout carries its own, shorter copy. Each version sits
   in the page once; only one is ever displayed (display:none also
   hides the other from screen readers). */
@media (min-width: 641px) { .hl-phone { display: none !important; } }
@media (max-width: 640px) { .hl-wide { display: none !important; } }

/* ---------- Small shared pieces ---------- */
.hl-label {
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-tertiary);
  margin: 0;
}
.hl-serif-line {
  font-family: var(--font-display); font-size: clamp(1.3125rem, 2.2vw, 1.75rem);
  line-height: 1.4; letter-spacing: -0.01em; color: var(--text-primary); margin: 0; max-width: 40ch;
}
.hl-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hl-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.hl-stack > * { margin: 0; }
.hl-stack .wr-btn { align-self: flex-start; }
.hl-body { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.wr-btn--quiet.hl-link { padding-left: 0; padding-right: 0; min-height: 44px; }

/* ---------- Hero ---------- */
.hl-hero { padding: clamp(var(--space-8), 7vw, var(--space-9)) 0 var(--space-9); }
.hl-hero__grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(var(--space-7), 5vw, 4.5rem); align-items: center; }
.hl-hero__photo {
  width: 280px; height: 280px; border-radius: 50%; object-fit: cover; display: block;
  border: 6px solid var(--surface-card); box-shadow: 0 0 0 1px var(--border-subtle), var(--shadow-md);
}
.hl-hero h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.25rem); line-height: 1.02; letter-spacing: -0.03em;
  margin: 0 0 var(--space-5); max-width: 16ch;
}
.hl-hero__lead { font-size: var(--fs-lg); color: var(--text-secondary); line-height: var(--lh-relaxed); max-width: 52ch; margin: 0 0 var(--space-6); }

/* ---------- Sound familiar ---------- */
.hl-pains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-7); margin: 0 0 var(--space-7); padding: 0; list-style: none; }
.hl-pains li { padding: var(--space-5) 0; border-top: 1px solid var(--border-default); font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--text-primary); }

/* ---------- Build it / teach it ---------- */
.hl-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: 0 0 var(--space-7); }
.hl-paths .wr-btn { align-self: flex-start; margin-top: auto; }
.hl-crm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--space-6), 4vw, 3.5rem); padding: clamp(var(--space-5), 4vw, var(--space-7)); }
.hl-close { margin-top: var(--space-3); }
.hl-close__note { font-size: var(--fs-sm); color: var(--text-secondary); }
.wr-section--sunken .hl-stages { margin-top: var(--space-4); }
.hl-paths .wr-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-7); }
.hl-paths .wr-card > * { margin: 0; }
.hl-paths h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.2; }

/* ---------- How I work ---------- */
.hl-how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--space-7), 5vw, 4.5rem); align-items: start; }
.hl-steps { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--border-subtle); }
.hl-steps li { display: flex; gap: var(--space-5); padding: var(--space-5) 0; border-top: 1px solid var(--border-subtle); }
.hl-steps__n { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1; color: var(--mark); min-width: 1.25em; flex: none; }
.hl-steps__t { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-primary); line-height: var(--lh-normal); }
.hl-steps__d { font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-secondary); margin: var(--space-1) 0 0; }

/* ---------- Proof cards ---------- */
.hl-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-8); }
.hl-proof .wr-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-7); }
.hl-proof .wr-card p { margin: 0; }
.hl-stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: var(--space-4) var(--space-6); }
.hl-stats__num { font-family: var(--font-display); font-size: clamp(2rem, 3.2vw, 2.5rem); font-weight: var(--fw-medium); line-height: 1; letter-spacing: -0.02em; color: var(--text-accent); }
.hl-stats__label { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: var(--space-2); }
.hl-built { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.hl-built li, .hl-built p { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--text-secondary); margin: 0; }
.hl-built b { color: var(--text-primary); }

/* ---------- Start band (ink card) ---------- */
.hl-band { margin-top: var(--space-8); padding: var(--space-7); border-radius: var(--radius-lg); }
.hl-band .wr-h2 { color: var(--text-inverse); font-size: clamp(1.5rem, 2.6vw, 2.125rem); max-width: 26ch; margin: 0 0 var(--space-3); }
.hl-band .wr-lead { color: var(--stone-300); font-size: var(--fs-md); }

/* ---------- Workshops ---------- */
.hl-workshop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--space-7), 5vw, 3.5rem); padding: clamp(var(--space-6), 4vw, 3.5rem); }
.hl-formats { border-bottom: 1px solid var(--border-subtle); }
.hl-formats > div { padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle); }
.hl-formats__t { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-primary); }
.hl-formats__d { font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-secondary); margin: var(--space-1) 0 0; }
.hl-stages { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-tertiary); margin: var(--space-5) 0 0; }

/* ---------- Gifts ---------- */
.hl-gifts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.hl-gifts .wr-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-7); }
.hl-gifts .wr-card > * { margin: 0; }
.hl-gifts h3 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); }
.hl-gifts .wr-btn { align-self: flex-start; margin-top: auto; }

/* ---------- Origin (gifts intro) ---------- */
.hl-origin { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(var(--space-6), 5vw, 4.5rem); align-items: start; margin-bottom: var(--space-7); }
.hl-origin h2 { font-size: clamp(2rem, 3.6vw, 2.625rem); max-width: 16ch; }
.hl-origin .wr-btn { margin-top: calc(-1 * var(--space-2)); }

/* ---------- Sign-off ---------- */
.hl-signoff { margin: var(--space-5) 0 0; font-size: var(--fs-md); color: var(--text-secondary); }

/* ============================================================
   /two-prompts
   ============================================================ */
.tp-back { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); text-decoration: none; margin-bottom: var(--space-4); }
.tp-back:hover { color: var(--text-primary); }
.tp-back svg { width: 1.05em; height: 1.05em; transform: scaleX(-1); }
.tp-hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.25rem); line-height: 1.02; letter-spacing: -0.03em; margin: var(--space-5) 0 var(--space-5); }

.tp-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); padding: var(--space-6) var(--space-7); }
.tp-how > div { display: flex; flex-direction: column; gap: var(--space-2); }
.tp-how p { margin: 0; font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--text-secondary); }

.tp-prompts { display: flex; flex-direction: column; gap: var(--space-7); }
.tp-prompt { display: flex; flex-direction: column; gap: var(--space-6); padding: clamp(var(--space-5), 4vw, var(--space-7)); }
.tp-prompt__head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); align-items: end; }
.tp-prompt__head h2 { margin: 0; }
.tp-prompt__list { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-secondary); }
.tp-prompt__list li::marker { color: var(--mark); }
.tp-prompt__text {
  margin: 0; background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: var(--space-6) clamp(var(--space-4), 3vw, var(--space-7));
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.7; color: var(--text-primary);
  white-space: pre-wrap; overflow-wrap: anywhere; max-width: none;
}
.tp-copy { align-self: flex-start; min-height: 44px; min-width: 11.5rem; }
.tp-copy[data-copied="true"] { background: var(--success); }

.tp-close { display: flex; justify-content: space-between; align-items: center; gap: var(--space-7); }
.tp-close__who { display: flex; gap: var(--space-5); align-items: center; }
.tp-close__who img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; border: 4px solid var(--surface-card); box-shadow: 0 0 0 1px var(--border-subtle); }
.tp-close__actions { display: flex; flex-direction: column; gap: var(--space-3); flex: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .hl-how, .hl-proof, .hl-workshop, .hl-gifts, .hl-paths, .hl-crm, .hl-origin { grid-template-columns: 1fr; }
  .hl-origin { gap: var(--space-4); margin-bottom: var(--space-6); }
  .hl-hero__photo { width: 200px; height: 200px; }
  .tp-how { grid-template-columns: 1fr; gap: var(--space-5); }
  .tp-prompt__head { grid-template-columns: 1fr; gap: var(--space-4); }
  .tp-close { flex-direction: column; align-items: flex-start; }
  .tp-close__actions { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .wr-container { padding: 0 1.25rem; }
  .wr-section { padding: var(--space-8) 0; }
  .hl-hero { padding: var(--space-6) 0 var(--space-7); }
  .hl-hero__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .hl-hero__photo { width: 112px; height: 112px; border-width: 4px; }
  .hl-hero h1 { font-size: 2.5rem; margin-bottom: var(--space-4); }
  .hl-hero__lead { font-size: 1.0625rem; margin-bottom: var(--space-5); }
  .hl-hero .hl-actions, .hl-close { flex-direction: column; align-items: stretch; }
  .hl-close .wr-btn { width: 100%; }
  .hl-hero .hl-actions .wr-btn { width: 100%; padding-top: 1rem; padding-bottom: 1rem; }
  .hl-pains { grid-template-columns: 1fr; margin-bottom: var(--space-5); }
  .hl-pains li { padding: var(--space-4) 0; font-size: var(--fs-base); }
  .hl-steps li { gap: var(--space-4); padding: var(--space-4) 0; }
  .hl-steps__n { font-size: 1.375rem; }
  .hl-steps__d { font-size: 0.9375rem; margin: 0; }
  .hl-proof { margin-top: var(--space-6); gap: var(--space-4); }
  .hl-proof .wr-card, .hl-gifts .wr-card, .hl-paths .wr-card { padding: var(--space-5); }
  .hl-paths { gap: var(--space-4); margin-bottom: var(--space-5); }
  .hl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .hl-built li, .hl-built p, .hl-proof .hl-body { font-size: 0.9375rem; }
  .hl-built { gap: var(--space-3); }
  .hl-band { margin-top: var(--space-6); padding: var(--space-5); }
  .hl-band .wr-cta-band { gap: var(--space-4); }
  .hl-band .wr-btn { width: 100%; }
  .hl-workshop { padding: var(--space-5); gap: var(--space-4); }
  .hl-workshop .wr-btn { align-self: stretch; }
  .hl-gifts { gap: var(--space-4); }
  .hl-gifts h3 { font-size: 1.5rem; }
  .tp-how { padding: var(--space-5); }
  .tp-prompt__text { font-size: 0.8125rem; padding: var(--space-5) var(--space-4); }
  .tp-copy { align-self: stretch; }
  .tp-close__actions { flex-direction: column; width: 100%; }
  .tp-close__actions .wr-btn { width: 100%; }
}

/* ============================================================
   Homepage (rework draft)
   ============================================================ */
.hm-hero h1 em { font-style: italic; color: var(--text-accent); }
.hm-hero .hl-hero__lead { max-width: 50ch; }
.hm-pains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-pains li { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.35; letter-spacing: -0.01em; }

.hm-path { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.hm-step { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); border-top: 1.5px solid var(--border-default); }
.hm-step__n { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: 1; color: var(--mark); }
.hm-step h3 { font-size: var(--fs-xl); margin: 0; }
.hm-step p { margin: 0; font-size: var(--fs-base); line-height: var(--lh-relaxed); }
.hm-step__do { color: var(--text-secondary); }
.hm-step__why { margin-top: auto !important; padding-top: var(--space-3); font-family: var(--font-display); font-style: italic; font-size: var(--fs-md) !important; line-height: 1.45 !important; color: var(--text-primary); border-top: 1px solid var(--border-subtle); }

.hm-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.hm-case { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.hm-case > * { margin: 0; }
.hm-case__row { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--space-3); align-items: baseline; }
.hm-case__row p { margin: 0; font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.hm-case__row + .hm-case__row p { color: var(--text-primary); }
.hm-case__k { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-tertiary); }
.hm-case__row + .hm-case__row .hm-case__k { color: var(--text-accent); }

.hm-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); }
.hm-trust h3 { font-size: var(--fs-2xl); margin: 0 0 var(--space-3); }
.hm-trust p { margin: 0; color: var(--text-secondary); font-size: var(--fs-base); line-height: var(--lh-relaxed); }

.hm-packs { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(var(--space-6), 5vw, 4.5rem); align-items: end; }
.hm-notify { display: flex; flex-direction: column; gap: var(--space-2); }
.hm-notify__row { display: flex; gap: var(--space-3); }
.hm-notify__row .wr-input { flex: 1; min-height: 48px; }
.hm-notify__row .wr-btn { min-height: 48px; }
.hm-free { margin: var(--space-7) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: var(--fs-base); }

@media (max-width: 1000px) {
  .hm-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hm-proof, .hm-trust, .hm-packs { grid-template-columns: 1fr; }
  .hm-trust { gap: var(--space-5); }
}
@media (max-width: 640px) {
  .hm-pains, .hm-path { grid-template-columns: 1fr; }
  .hm-path { gap: var(--space-5); }
  .hm-notify__row { flex-direction: column; }
  .hm-notify__row .wr-btn { width: 100%; }
  .hm-case { padding: var(--space-5); }
  .hm-trust h3 { font-size: var(--fs-xl); }
}

/* ============================================================
   How I work
   ============================================================ */
.hw-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hw-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); padding: var(--space-7) 0; border-top: 1.5px solid var(--border-default); }
.hw-step:last-child { border-bottom: 1.5px solid var(--border-default); }
.hw-step__head { display: flex; gap: var(--space-5); align-items: baseline; }
.hw-step__head h2 { font-size: clamp(1.625rem, 2.6vw, var(--fs-3xl)); margin: 0; }
.hw-step__body { display: flex; flex-direction: column; gap: var(--space-4); }
.hw-step__body p { margin: 0; font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.hw-get { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary) !important; }
.hw-plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.hw-plates .wr-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.hw-plates .wr-card > * { margin: 0; }
.hw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.hw-list li { display: flex; gap: var(--space-3); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-primary); }
.hw-list li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 0.55em; transform: rotate(45deg); border: 1.5px solid var(--mark); }
@media (max-width: 900px) {
  .hw-step { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-6) 0; }
  .hw-plates { grid-template-columns: 1fr; }
}

/* ============================================================
   Map your friction (contact)
   ============================================================ */
.fr-section { padding-top: clamp(var(--space-8), 7vw, var(--space-9)); }
.fr-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(var(--space-7), 5vw, 4.5rem); align-items: start; }
.fr-intro h1 { font-size: clamp(2.5rem, 5.2vw, 4.25rem); line-height: 1.02; letter-spacing: -0.03em; margin: var(--space-4) 0 var(--space-5); }
.fr-ds { list-style: none; margin: var(--space-6) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.fr-ds li { padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.fr-ds b { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-medium); color: var(--text-primary); display: block; margin-bottom: var(--space-1); }
.fr-note { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0; }
.fr-form { display: flex; flex-direction: column; gap: var(--space-5); padding: clamp(var(--space-5), 3.5vw, var(--space-7)); }
.fr-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.fr-opt { font-weight: var(--fw-regular); color: var(--text-tertiary); margin-left: var(--space-1); }
.fr-form .wr-input { min-height: 48px; }
.fr-thanks { font-size: var(--fs-2xl); margin: var(--space-4) 0 var(--space-2); }
@media (max-width: 900px) { .fr-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .fr-row { grid-template-columns: 1fr; } }

/* The Shelf */
.sh-notify { max-width: 560px; margin-top: var(--space-7); }

/* ============================================================
   Balance: centered heads and single-column blocks on the
   reworked pages (main.bal). Two-column layouts stay as they are.
   ============================================================ */
.bal .wr-pagehero .wr-container { text-align: center; display: flex; flex-direction: column; align-items: center; }
.bal .wr-pagehero h1, .bal .wr-pagehero .wr-pagehero__lead { margin-left: auto; margin-right: auto; }
.bal .wr-pagehero h1 { max-width: 20ch; }
.bal .wr-section-head { text-align: center; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-items: center; }
.bal .wr-section-head .wr-h2 { max-width: 26ch; }
.bal .wr-section-head .wr-lead { margin-left: auto; margin-right: auto; }
.bal .hl-serif-line { text-align: center; margin-left: auto; margin-right: auto; max-width: 44ch; }
.bal .hm-pains + .hl-serif-line { margin-top: var(--space-2); }
.bal .wr-faq { margin-left: auto; margin-right: auto; }
.bal .hm-free { text-align: center; }
.bal .sh-notify { margin-left: auto; margin-right: auto; text-align: center; }
.bal .sh-notify .hm-notify__row { text-align: left; }
.bal #path > .wr-container > .hl-link, .bal .wr-section > .wr-container > .hl-link { display: flex; width: fit-content; margin: 0 auto; }
.bal .hl-hero__grid { justify-content: center; }
.bal .wr-story[style] { margin-left: auto; margin-right: auto; max-width: 54ch !important; }
.bal .wr-story[style] .wr-pull { max-width: none; }
.bal #started .wr-lead { margin-left: auto; margin-right: auto; text-align: center; }
.bal #started .wr-tier-head { justify-content: center; text-align: center; }
.bal #started .wr-listen { max-width: 760px; margin-left: auto; margin-right: auto; }
.bal .wr-container--text > .wr-reveal[style*="text-align: left"] { text-align: center !important; }
.bal .wr-container--text .wr-lead { margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
  .bal .wr-section-head, .bal .wr-pagehero .wr-container { text-align: left; align-items: flex-start; }
  .bal .hl-serif-line, .bal .hm-free, .bal #started .wr-lead { text-align: left; }
  .bal .wr-container--text > .wr-reveal[style*="text-align: left"] { text-align: left !important; }
}
@media (min-width: 641px) { .bal .hl-hero__grid { grid-template-columns: auto minmax(0, 640px); } }
.fr-actions { margin: var(--space-2) 0 var(--space-7); }
.fr-hw { margin: 0 0 var(--space-2) !important; }
.fr-form__head h2 { font-size: var(--fs-2xl); margin: 0 0 var(--space-2); }
.fr-form__head p { margin: 0; color: var(--text-secondary); font-size: var(--fs-base); line-height: var(--lh-relaxed); }
.fr-wait { margin-bottom: var(--space-3) !important; }

/* Let's talk (contact) */
.ct-hero { padding-bottom: var(--space-8); }
.ct-actions { justify-content: center; margin-top: var(--space-6); }
.ct-alt { margin: var(--space-4) 0 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.ct-audit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.ct-audit .wr-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.ct-q { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.3; letter-spacing: -0.01em; color: var(--text-primary); }
.ct-a { margin: 0; font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--text-secondary); }
@media (max-width: 900px) { .ct-audit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ct-audit { grid-template-columns: 1fr; } .ct-actions { justify-content: flex-start; } .ct-actions .wr-btn { width: 100%; } }

/* Balance: dark call-to-action bands stack and center (no dead space on the right) */
.bal .wr-cta-band { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--space-6); }
.bal .wr-cta-band > div { display: flex; flex-direction: column; align-items: center; }
.bal .wr-cta-band .wr-h2 { max-width: 24ch; margin-left: auto; margin-right: auto; }
.bal .wr-cta-band .wr-lead { max-width: 56ch; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
  .bal .wr-cta-band { justify-items: stretch; text-align: left; }
  .bal .wr-cta-band > div { align-items: flex-start; }
}

/* Balance on /hello and /two-prompts */
.bal .wr-section-sunken > .wr-container > .hl-stages,
.bal .wr-section > .wr-container > .hl-stages { text-align: center; margin-left: auto; margin-right: auto; max-width: 64ch; }
.bal .hl-signoff { text-align: center; }
.bal .hl-close { justify-content: center; }
.bal .wr-container.hl-stack { align-items: center; }
.bal .tp-hero .wr-container { align-items: center; }
.bal .tp-close { justify-content: center; }
@media (max-width: 640px) {
  .bal .wr-section > .wr-container > .hl-stages, .bal .hl-signoff { text-align: left; }
  .bal .wr-container.hl-stack { align-items: stretch; }
}
.bal .hm-free { margin-left: auto; margin-right: auto; }
.bal .wr-section .wr-container > .wr-lead[style*="max-width"] { margin-left: auto; margin-right: auto; text-align: center; }
@media (max-width: 640px) { .bal .wr-section .wr-container > .wr-lead[style*="max-width"] { text-align: left; } }

/* How I work step layouts (variants for review) */
.hw-steps--stacked .hw-step { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; gap: var(--space-4); }
.hw-steps--stacked .hw-step__head { justify-content: center; }
.hw-steps--cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.hw-steps--cards .hw-step { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-sm); }
.hw-steps--cards .hw-step__head h2 { font-size: var(--fs-2xl); }
.hw-steps--cards .hw-get { background: var(--surface-sunken); border-color: transparent; }
@media (max-width: 900px) { .hw-steps--cards { grid-template-columns: 1fr; } }

/* ===== Research + StoryBrand pass ===== */
.bal .wr-pagehero { padding: clamp(var(--space-7), 5vw, var(--space-8)) 0 var(--space-7); }
.hl-hero.hm-hero { padding: clamp(var(--space-7), 5vw, var(--space-8)) 0 var(--space-8); }
.hm-offer { font-size: var(--fs-lg, 1.125rem); font-weight: 600; color: var(--text-primary, var(--ink)); margin: calc(-1 * var(--space-3)) 0 var(--space-6); max-width: 50ch; }
.hm-authority { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: var(--surface-card); padding: var(--space-5) 0; }
.hm-authority p { margin: 0 auto; max-width: 70ch; text-align: center; font-size: .9375rem; line-height: 1.5; color: var(--text-secondary); }
.hm-quote { margin: var(--space-4) 0 0; padding: var(--space-4); border-left: 3px solid var(--accent, #B5512F); background: var(--surface-sunken); font-family: var(--font-display); font-size: 1.0625rem; font-style: italic; border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0; }
.hm-quote--todo { border: 1.5px dashed var(--accent, #B5512F); border-radius: var(--radius-md, 8px); color: var(--text-secondary); background: transparent; }
.hm-quote__tag { display: block; font-family: var(--font-mono, "JetBrains Mono", monospace); font-style: normal; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-accent); margin-bottom: var(--space-2); }
.hw-rail { list-style: none; margin: 0 auto var(--space-7); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 760px; position: relative; }
.hw-rail::before { content: ""; position: absolute; top: 18px; left: 12.5%; right: 12.5%; height: 2px; background: var(--accent, #B5512F); opacity: .35; }
.hw-rail li { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); position: relative; }
.hw-rail span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent, #B5512F); color: #fff; font-size: .9375rem; letter-spacing: 0; box-shadow: 0 0 0 5px var(--surface-sunken); }
.hw-steps--cards .hw-step { position: relative; }
.hw-steps--cards .hw-step p { text-align: left; }
@media (max-width: 640px) {
  .hw-steps--cards { grid-template-columns: 1fr; }
  .hw-rail li { font-size: .625rem; }
  .hm-authority p { text-align: left; }
}
.hm-case { display: flex; flex-direction: column; }
.hm-case .hm-quote { margin-top: auto; }
.hm-case .hm-case__row:last-of-type { margin-bottom: var(--space-4); }

/* ===== Balance pass 2: apply the research rules =====
   Center: heroes, section heads, short lines (1-3), CTA bands.
   Long text: left-aligned inside a centered column. No half-empty columns. */
@media (min-width: 641px) {
  /* Long paragraphs: centered column, left-aligned text */
  .bal .wr-container--text > .wr-reveal[style*="text-align: left"] { text-align: center !important; }
  .bal .wr-container--text > .wr-reveal[style*="text-align: left"] > p { text-align: left; max-width: 62ch; margin-left: auto; margin-right: auto; }
  .bal #started .wr-lead { text-align: left; }
  /* Speaking list heads: title over note, centered */
  .bal .wr-tier-head { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-2); }
  .bal .wr-pagehero__lead { max-width: 66ch; }
  /* About: stage names centered as one group */
  .bal .wr-cred { justify-content: center; text-align: center; flex-direction: column; gap: var(--space-4); }
  .bal .wr-cred__names { justify-content: center; }
  /* About: text sits in the middle of the photo, not the top */
  .bal .wr-story-grid { align-items: center; }
  /* About: story column at a 60-70 character line, less empty side space */
  .bal .wr-story[style] { max-width: 66ch !important; }
  /* Home: pains as four equal cards */
  .bal .hm-pains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); border: 0; }
  .bal .hm-pains > li { border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-lg); background: var(--surface-card); padding: var(--space-5) var(--space-6); display: flex; align-items: center; justify-content: center; text-align: center; min-height: 104px; margin: 0; }
  .bal .hm-pains > li::before { display: none; }
  /* Home: packs stacked and centered, like the Shelf */
  .bal .hm-packs { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-6); max-width: 640px; margin: 0 auto; }
  .bal .hm-packs .hl-stack { align-items: center; }
  .bal .hm-packs .wr-h2 { max-width: 24ch; }
  .bal .hm-packs .hm-notify { width: 100%; max-width: 480px; }
  .bal .hm-packs .hm-notify .hm-notify__row { text-align: left; }
  /* Home: trust columns centered (short text) */
  .bal .hm-trust > div { text-align: center; }
  /* /hello: stats card columns meet in the middle; close stacked */
  .bal .hl-close { flex-direction: column; align-items: center; text-align: center; }
}

/* ===== Width system: two widths only =====
   Wide = the normal container (grids, cards, lists).
   Text = 860px (heroes, prose, FAQ, CTA bands, forms, strips).
   Every section lines up to one of these two edges. */
@media (min-width: 641px) {
  .bal { --w-text: 860px; }
  .bal .wr-container--text { max-width: calc(var(--w-text) + 2 * var(--gutter, 32px)); }
  .bal .wr-pagehero h1 { max-width: var(--w-text); }
  .bal .wr-pagehero .wr-pagehero__lead { max-width: 64ch; }
  .bal .hl-hero__grid { max-width: 1040px; margin-left: auto; margin-right: auto; }
  .bal .wr-cta-band { max-width: var(--w-text); margin-left: auto; margin-right: auto; }
  .bal .wr-cta-band .wr-h2 { max-width: var(--w-text); font-size: clamp(2.25rem, 3.6vw, 3.25rem); }
  .bal .wr-cta-band .wr-lead { max-width: 64ch; }
  .bal .wr-faq { max-width: var(--w-text); }
  .bal .hm-packs { max-width: var(--w-text); }
  .bal .hm-authority p { max-width: var(--w-text); }
  .bal .hl-close, .bal .hl-signoff { max-width: var(--w-text); }
  .bal .wr-section-head .wr-h2 { max-width: 30ch; }
}

/* FAQ as a card grid at full width: answers visible, rows even */
@media (min-width: 641px) {
  .bal .wr-faq--grid { max-width: none; border-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .bal .wr-faq--grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bal .wr-faq--grid .wr-faq__item { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); padding: var(--space-5) var(--space-6); }
  .bal .wr-faq--grid summary { pointer-events: none; padding: 0 0 var(--space-3); }
  .bal .wr-faq--grid .wr-faq__ind { display: none; }
  .bal .wr-faq--grid .wr-faq__a { padding: 0; font-size: var(--fs-base); }
  .bal .hm-packs { max-width: none; }
  .bal .hm-packs .sh-soon { width: 100%; text-align: left; }
}

/* About: the long story sits on the same grid as the photo row above.
   Labels in the left column, text lined up under the intro text. */
@media (min-width: 900px) {
  .bal .wr-story[style] { max-width: none !important; margin-left: 0; margin-right: 0; position: relative;
    padding-left: calc((100% - var(--space-8)) * 0.425 + var(--space-8)); }
  .bal .wr-story[style] > * { max-width: 64ch; }
  .bal .wr-story[style] .wr-story__sub { position: absolute; left: 0; display: block; margin: 0;
    width: calc((100% - var(--space-8)) * 0.425); text-align: right; padding-top: .35em; }
}
@media (min-width: 900px) { .bal .wr-story[style] .wr-story__sub + p { margin-top: var(--space-6); } }
@media (min-width: 641px) {
  .bal .llm-list { max-width: var(--w-text); margin-left: auto; margin-right: auto; }
  .bal .llm-note { margin-left: auto; margin-right: auto; text-align: left; }
}

/* Proof: each story reads left to right, who → started → now. Rows size to their content, no empty card bottoms. */
@media (min-width: 900px) {
  .bal .hm-proof { display: flex; flex-direction: column; gap: 0; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
  .bal .hm-proof .hm-case { display: grid; grid-template-columns: 0.8fr 1fr 1.2fr; gap: var(--space-7); align-items: start; border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: var(--space-6) var(--space-7); }
  .bal .hm-proof .hm-case + .hm-case { border-top: 1px solid var(--border-subtle); }
  .bal .hm-proof .hm-case .hl-label { margin: 0; padding-top: .3em; line-height: 1.6; }
  .bal .hm-proof .hm-case .hm-case__row { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 !important; }
  .bal .hm-proof .hm-case .hm-case__row p { margin: 0; }
}
@media (min-width: 641px) { .bal .hm-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-8); } }

/* Friction-first hero */
.hm-guide { font-family: var(--font-display); font-style: italic; font-size: 1.125rem; line-height: 1.5; color: var(--text-secondary); max-width: 50ch; margin: calc(-1 * var(--space-3)) 0 var(--space-6); padding-left: var(--space-4); border-left: 2px solid var(--border-accent, var(--accent)); }
.hm-hero h1 { max-width: 16ch; }
.hm-pain__k { display: block; font-family: var(--font-mono); font-style: normal; font-weight: 500; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-accent); margin-bottom: var(--space-2); }
.bal .hm-pains > li { flex-direction: column; }
.hm-lead { max-width: var(--w-text, 860px); margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-7) var(--space-6); }
.hm-lead h3 { font-size: var(--fs-2xl); margin: 0; }
.hm-lead .hl-body { max-width: 56ch; margin: 0 0 var(--space-3); }
.hm-lead__more { font-size: var(--fs-sm); color: var(--text-secondary); margin: var(--space-3) 0 0; }
.hm-lead__more a { color: var(--text-accent); }